<template>
  <div class="doctor">
    <!-- 头部页面 -->
    <div id="head">
      <p>问医生</p>
      <p>专业医生在线帮你少走弯路</p>
      <span></span>
    </div>

    <router-link id="map" :to="{ name: 'inquiryCard' }">
      <span></span>
      <p>医美问诊卡</p>
      <a href="">去完善<van-icon name="arrow" /></a>
    </router-link>

    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
    </van-dropdown-menu>
<!-- 手术 微整页面 -->
    <div id="main">
      <p>手术</p>
      <ul>
        <li v-for="i in 10" :key="i">鼻部</li>
      </ul>
    </div>

    <div id="tain">
      <p>微整</p>
      <ul>
        <li v-for="v in 10" :key="v">微整</li>
      </ul>
    </div>
<!-- 医生页面 -->
    <router-link id="foot" :to="{ name: 'resume' }">
      <div id="header">
        <p></p>
      </div>
      <div id="footed">
        <p>高培峰</p>
        <p>主治医生</p>
        <p>北京悦美好医医疗美容</p>
        <p>13295人咨询过</p>
        <p>12.1万+人预约</p>
        <router-link id="link" :to="{ name: 'consult' }">咨询</router-link>
      </div>
      <div id="pop">
        <span>鼻部</span>
        <span>眼部</span>
        <span>吸脂瘦身</span>
        <span>脂肪填充</span>
      </div>

      <div id="image">
        <van-swipe :loop="false" :width="200" >
          <van-swipe-item
            ><img src="../../images/前后.jpg" alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img src="../../images/前后.jpg" alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img src="../../images/前后.jpg" alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img src="../../images/前后.jpg" alt=""
          /></van-swipe-item>
        </van-swipe>
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      index: 0,
      value1: 0,
      value2: "a",
      option1: [
        { text: "郑州", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 },
      ],
      option2: [
        { text: "鼻子", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
}
html,body{
    background-color: #F6F6F6;
}
.doctor a {
  display: block;
}

#head {
  height: 150px;
  width: 100%;
  // background-color: cadetblue;
  position: relative;
}
#head :nth-child(1) {
  display: block;
  height: 70px;
  width: 200px;
  // background-color: antiquewhite;
  margin-left: 10px;
  text-align: center;
  line-height: 70px;
  font-size: 40px;
  font-weight: 450;
  position: absolute;
}
#head :nth-child(2) {
  display: block;
  height: 50px;
  width: 430px;
  // background-color: rgb(158, 137, 110);
  margin-left: 10px;
  text-align: center;
  font-size: 30px;
  line-height: 50px;
  position: absolute;
  top: 80px;
}
#head span {
  display: block;
  height: 230px;
  width: 200px;
  background-image: url("https://lanhu.oss-cn-beijing.aliyuncs.com/pslejnu6xr5poc5e6blra0zh0s7s3mjvscvg36db080f-1ca4-466d-ba52-3ac9d003a561");
  background-position-x: -40px;
  background-position-y: 30px;
  position: absolute;
  right: 0px;
}
#map {
  height: 200px;
  width: 100%;
  background-color: #6c91ec;
  position: relative;
  border-radius: 50px;
  margin-top: 50px;
  span {
    display: block;
    height: 110px;
    width: 120px;
    background-image: url("https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/47da4cdd5efa4839a23f9d002f0fe249_mergeImage.png");
    background-size: 100% 100%;
    position: absolute;
    top: 35px;
    left: 80px;
  }
}
#map p {
  display: block;
  position: absolute;
  top: 50px;
  left: 220px;
  // background-color: aqua;
  font-size: 34px;
  font-weight: 550;
  color: white;
}
#map a {
  display: block;
  position: absolute;
  top: 55px;
  right: 100px;
  height: 80px;
  width: 170px;
  background: white;
  font-size: 30px;
  text-align: center;
  line-height: 80px;
  color: #6c6c6c;
  border-radius: 20px;
}
#main {
  background-color: #f6f6f6;
  p {
    height: 60px;
    width: 100%;
    padding-top: 10px;
    // background-color: #6c6c6c;
    font-size: 40px;
    margin-left: 33px;
  }
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      height: 60px;
      width: 130px;
      text-align: center;
      line-height: 60px;
      font-size: small;
      margin-left: 10px;
      margin-right: 10px;
      border-radius: 20px;
      margin-top: 20px;
      background-color: #cecece;
    }
  }
}
#tain {
  background-color: #f6f6f6;
  p {
    height: 60px;
    width: 100%;
    padding-top: 10px;
    // background-color: #6c6c6c;
    font-size: 40px;
    margin-left: 33px;
  }
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      height: 60px;
      width: 130px;
      text-align: center;
      line-height: 60px;
      font-size: small;
      margin-left: 10px;
      margin-right: 10px;
      border-radius: 20px;
      margin-top: 20px;
      background-color: #cecece;
    }
  }
}
#foot {
  margin-top: 25px;
  height: 435px;
  width: 100%;
  // background: #6c91ec;
  position: relative;
}

#header {
  height: 100%;
  width: 25%;
  // background-color: #cecece;
  float: left;
  p {
    height: 140px;
    width: 140px;
    border-radius: 50%;
    border:1px solid red;
    background-image: url("../../images/hand.jpg");
    background-position-x:0px;
    background-position-y: -6px;
    background-size: 100%;
    margin-left: 20px;
    box-sizing: border-box;
  }
}
#footed {
  height: 40%;
  width: 75%;
  // background-color: burlywood;
  font-size: 28px;
  position: relative;
  float: left;
}
#footed :nth-child(1) {
  position: absolute;
  top: 15px;
  color: black;
  left: 20px;
}
#footed :nth-child(2) {
  position: absolute;
  top: 15px;
  left: 140px;
  background-color: #d73838;
  color: white;
}
#footed :nth-child(3) {
  position: absolute;
  top: 61px;
  left: 20px;
  color: #666666;
}
#footed :nth-child(4) {
  position: absolute;
  top: 105px;
  color: #999999;
  left: 20px;
}
#footed :nth-child(5) {
  position: absolute;
  top: 105px;
  color: #999999;
  left: 250px;
}
#link {
  height: 60px;
  width: 90px;
  background-color: #4e7def;
  text-align: center;
  line-height: 60px;
  color: white;
  position: absolute;
  border-radius: 10px;
  top: 20px;
  right: 30px;
}
#pop {
  display: block;
  position: absolute;
  top: 160px;
  right: 0;
  height: 70px;
  width: 75%;
  font-size: 32px;
  // background-color: #bdb7b7;
}
#pop :nth-child(1) {
  display: block;
  height: 60px;
  width: 100px;
  background-color: #f6f6f6;
  text-align: center;
  line-height: 60px;
  color: black;
  float: left;
  margin-left: 15px;
}
#pop :nth-child(2) {
  display: block;
  height: 60px;
  width: 100px;
  background-color: #f6f6f6;
  text-align: center;
  line-height: 60px;
  color: black;
  float: left;
  margin-left: 15px;
}
#pop :nth-child(3) {
  display: block;
  height: 60px;
  width: 133px;
  background-color: #f6f6f6;
  text-align: center;
  line-height: 60px;
  color: black;
  float: left;
  margin-left: 15px;
}
#pop :nth-child(4) {
  display: block;
  height: 60px;
  width: 133px;
  background-color: #f6f6f6;
  text-align: center;
  line-height: 60px;
  color: black;
  float: left;
  margin-left: 15px;
}
#image {
  height: 200px;
  width: 75%;
  // background-color: #23252a;
  position: absolute;
  top: 230px;
  right: 0;
  img {
    margin-top: 10px;
    height: 190px;
    margin-right: 10px;
  }
}
</style>
